<template>
  <div class="search">
    <el-card>
      <el-row>
        <el-col :span="16">
          <el-form :model="searchForm" inline :label-width="100" class="search-form" style="width: 80%">
            <el-form-item label="所属分类">
              <el-select v-model="searchForm.categoryId"  style="width: 120px"  clearable>
              <el-option v-for="item in categoryList" :key="item.id" :label="item.name" :value="item.id"   placeholder="请选择分类名称"  style="width: 160px" />
              </el-select>
            </el-form-item>
            <el-form-item label="属性名称" >
              <el-input type="text" v-model="searchForm.keyName" clearable placeholder="请输入属性名名称" style="width: 120px" />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="onSubmit">搜索</el-button>
            </el-form-item>
          </el-form>
        </el-col>
        <el-col :span="8">
          <div>
            <el-button type="success" @click="showDialogAdd = true" style="margin-right: 80%" >添加属性名</el-button>
          </div>
        </el-col>
      </el-row>
      <el-table :data="tableData" style="width: 100%;" >
        <el-table-column fixed prop="id" label="规格名id" width="150" />
        <el-table-column prop="category.name" label="所属分类" width="200" />
        <el-table-column prop="keyName" label="规格名名称" width="300" />>
        <el-table-column prop="attrType" label="规格名类型" width="250" >
          <template #default="scope">{{ scope.row.attrType === 0 ? '销售类型' : '基本类型' }}</template>
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间" width="200" />
        <el-table-column fixed="right" label="操作" width="120">
          <template #default="scope">
            <el-button link type="primary" size="small" @click="toChangeAttrKey(scope.row)"
            >编辑</el-button>
            <el-button link type="danger" size="small" @click="deleteRow(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination :total="total" @pagination="getPage" :limit="pageSize"></pagination>
    </el-card>
  </div>

  <!--属性名添加-->
  <el-dialog v-model="showDialogAdd" itle="新增属性名" width="32%" center>
    <div class="addressWrapper">
      <div style="text-align: center;margin-bottom:5%">
        <h2>添加属性名</h2>
      </div>
      <el-form :model="attrKeyForm" :rules="rules" ref="formRef" label-width="auto" style="max-width: 450px">
        <el-form-item label="所属分类" prop="categoryId">
          <el-select v-model="attrKeyForm.categoryId"  style="width: 200px">
            <el-option v-for="item in categoryList" :key="item.id" :label="item.name" :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="规格名类型" prop="attrType">
          <el-select v-model="attrKeyForm.attrType"  style="width: 200px">
            <el-option label="销售类型" value="0" />
            <el-option label="基本类型" value="1" />
          </el-select>
        </el-form-item>
        <el-form-item label="属性名名称" prop="keyName" >
          <el-input v-model="attrKeyForm.keyName" placeholder="请填写属性名名称"/>
        </el-form-item>
      </el-form>
    </div>
    <template #footer>
    <span class="dialog-footer">
      <el-button @click="showDialogAdd=false">取消</el-button>
      <el-button type="primary" @click="addAttrKey">确定</el-button>
    </span>
    </template>
  </el-dialog>

  <!--属性名编辑-->
  <el-dialog v-model="showDialogChange" title="属性名修改" width="32%" center>
      <el-form :model="changeForm" :rules="rules" ref="formRef" label-width="auto" style="max-width: 450px">
        <el-form-item label="所属分类" prop="categoryId">
          <el-select v-model="changeForm.categoryId"  style="width: 120px">
            <el-option v-for="item in categoryList" :key="item.id" :label="item.name" :value="item.id" style="width: 160px" />
          </el-select>
        </el-form-item>
        <el-form-item label="属性名名" prop="keyName">
          <el-input v-model="changeForm.keyName" placeholder="请填写属性名名"/>
        </el-form-item>
      </el-form>
    <template #footer>
    <span class="dialog-footer">
      <el-button @click="showDialogChange=false">取消</el-button>
      <el-button type="primary" @click="changeAttrKey">确定</el-button>
    </span>
    </template>
  </el-dialog>
</template>

<script  setup>
import {onMounted, reactive, ref} from "vue";
import Pagination from "@/components/Pagination/index.vue";
import { ElMessage } from "element-plus";
import 'element-plus/theme-chalk/el-message.css'
import { deleteBrandAPI, updateBasicAPI} from "@/api/brandManage.js";
import {Plus} from "@element-plus/icons";
import {getChildNameAPI} from "@/api/categoryManage.js";
import {addAttrKeyAPI, deleteAttrKeyAPI, getAttrKeyAPI, updateAttrKeyAPI} from "@/api/attrKeyManage.js";
const current = ref(1)
const pageSize = ref(10)
const total = ref(100)
const categoryList = ref([{
  id:'',
  name:''
}])
//添加dialog
const showDialogAdd = ref(false)
//修改dialog
const showDialogChange = ref(false)

const tableData = ref([
  {
    id:'',
    category: [],
    categoryId:'',
    keyName:'',
    attrType: '',
    createTime:'',
  }
])
//添加form
const attrKeyForm = ref({
  categoryId: '',
  keyName: '',
  attrType:'',
})

//修改form
const changeForm = ref({
  id:'',
  categoryId:'',
  keyName:'',
})
//查询form
const searchForm = reactive({
  keyName:null,
  categoryId:null,
})
const getAttrKey = async () => {
  const res = await getAttrKeyAPI({current:current.value,pageSize:pageSize.value});
  tableData.value = res.data.records
  total.value = res.data.total
  console.log(tableData.value)
}
onMounted(() => getAttrKey())
const getPage = (params) => {
  current.value = params.page
  pageSize.value = params.limit
  if(searchForm){
    onSubmit()
  }else{
    getAttrKey()
  }
}
//条件搜索
const onSubmit = async ()=>{
  const categoryId = searchForm.categoryId
  const keyName = searchForm.keyName
  const params = ref({
    categoryId:categoryId,
    keyName:keyName,
    current:current.value,
    pageSize:pageSize.value
  })
  const res = await getAttrKeyAPI(params.value);
  tableData.value = res.data.records
  total.value = res.data.total
}
//点击编辑显示
const toChangeAttrKey = async (row) => {
  //查询分类信息
  changeForm.value  = row
  changeForm.value.categoryId = row.category.id
  showDialogChange.value = true
}

/*属性名添加数据校验*/
const rules = {
  categoryId: [
    {required: true, message: '所属分类不能为空', trigger: 'blur'}
  ],
  keyName: [{required: true, message: '属性名名称不能为空', trigger: 'blur'}],
  attrType: [{required: true, message: '类型不能为空', trigger: 'blur'}],
}
const formRef = ref({})
const addAttrKey = () => {
  formRef.value.validate(async (valid) => {
    if (valid) {
      const res = await addAttrKeyAPI(attrKeyForm.value)
      if (res.data) {
        showDialogAdd.value=false
        await getAttrKey()
        ElMessage.success("添加成功")
      }
    }

  })
}

//属性名信息修改
const changeAttrKey = async () => {
 /* changeForm.value.categoryId = changeForm.value.category.id*/
  const res = await updateAttrKeyAPI(changeForm.value)
  if(res.data){
    await getAttrKey()
    showDialogChange.value=false
    ElMessage.success("修改成功")
  }
}

//属性名删除
const deleteRow = async (row) => {
  const res = await deleteAttrKeyAPI(row.id)
  if(res.data){
    await getAttrKey()
    ElMessage.success("删除成功");
  }
}
//初始化挂载
const getCategory = async ()=>{
  const res = await getChildNameAPI()
  categoryList.value = res.data
}
onMounted(() => getCategory())

</script>

<style scoped>

.search {
  .oss-operation {
    margin-bottom: 2vh;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;

    button {
      margin-right: 5px;
    }
  }
}
</style>